import React, { Component } from 'react';
import "./Addtopics.css";

class Add extends Component {
    constructor(props) {
        super(props);
        this.state={
            userid:'0',
            text: '111111',
            src:'111',
            book:'',
            author:'',
            classify:''
        }
    }
    inputChange(e){
        //console.log(e.target.value)
        this.setState({
            text:e.target.value
        })
    }

    changepic(e) {
        var reads = new FileReader();
        var f = document.getElementById('file').files[0];
       // var srcc=''
        reads.readAsDataURL(f);
        console.log(f)
        reads.onload = function(e) {
            document.getElementById('img').src = this.result;
            // console.log(this.result)
        }
    }
    render(props) {
        return (
            <div>
            <div>
            <i  className='iconfont iconfanhui' style={{
                fontSize:'40px',
                float:'left',
                margin:'30px' 
           }} onClick={() =>{
               var x = document.getElementsByClassName("bijian-right-box");
               var i;
               for (i = 0; i < x.length; i++) {
                   x[i].style.display = "none";
               }
               document.getElementsByClassName('bijian-right-box')[1].style.display="block";}}>&lt;</i> 
           </div>
            <div id='all'>
               <div id='title'>内容:</div>
               <textarea 
                type='text' style={{width:'300px',height:'150px',border:'1px solid #73C1F3'}}
                onChange={(e)=>this.inputChange(e)} ></textarea>
                <div className="file">
                    <span>上传图片</span>
                    <input type="file"  id="file" className="upload" accept="image/*"
                        onChange={(e)=>this.changepic(e)}/>
                   
                </div>
                 <img id='img' style={{width:'200px',height:'100px',border:'1px solid #73C1F3'}}
                    src=''></img>
                <div id='push' 
                style={{marginLeft:'500px'}} onClick= {this.topicszeng} >发布</div>
            </div>

    </div>
        )
    }
    //增加新的随笔
	topicszeng = () => {       
        this.state.src=document.getElementById('img').src
        console.log(this.state)
        var x = document.getElementsByClassName("bijian-right-box");
               var i;
               for (i = 0; i < x.length; i++) {
                   x[i].style.display = "none";
               }
               document.getElementsByClassName('bijian-right-box')[1].style.display="block";
		console.log('topicszeng');
		fetch('http://62.234.30.197:8088/topics/zeng', {
			method: 'post',
            body: JSON.stringify({'txt':`${this.state.text}`,
            'pic':`${this.state.src}`,
            'userid':`${this.state.userid}`,
            'bookname':`${this.state.book}`,
            'type':`${this.state.classify}`,
            'name':`${this.state.author}`


        }),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			console.log(res)
        })
        
	}


   
}

export default Add
